<!--算机2202毕旭浩2204120211-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>熙康体检系统</title>
		<!-- 导入vue框架 - 生产环境版本 -->
		<script src="js/v3.2.8/vue.global.prod.js"></script>
		<!-- 导入ElementPlus框架 -->
		<script src="js/element-plus.js"></script>
		<!-- 导入ElementPlus图标组件 -->
		<script src="js/element-icons.js"></script>
		<!-- 导入ElementPlus CSS样式 -->
		<link rel="stylesheet" href="css/element-plus.css">
		<!-- 引入主页面自定义样式 -->
		<link rel="stylesheet" href="css/main.css">
		<style>
			/* iframe样式设置 - 用于主内容区显示各功能页面 */
			iframe {
				border: 0px solid;  /* 无边框 */
				width: 100%;       /* 宽度100%填充父容器 */
				height: 99%;       /* 高度99%填充父容器 */
			}

			/* 链接样式设置 - 去除下划线 */
			a {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<!-- Vue应用挂载点 -->
		<div id="app">
			<!-- Element Plus容器组件 - 整体布局容器 -->
			<el-container class="container">
				<!-- 头部区域 -->
				<el-header class="header">
					<!-- 左侧标题区域 -->
					<div>
						<!-- 电话图标 -->
						<el-icon color="#fff" style="font-size: 16px; margin-right: 8px">
							<Phone />
						</el-icon>
						<!-- 系统标题 -->
						<h1>熙心健康体检系统</h1>
					</div>
					<!-- 右侧用户信息区域 -->
					<div>
						<!-- 显示当前登录用户 -->
						<p>系统管理员：admin</p>
						<!-- 退出登录按钮 -->
						<el-button type="danger" @click="logout" size="small">OUT</el-button>
					</div>
				</el-header>
				
				<!-- 主体内容区域 -->
				<el-container>
					<!-- 侧边导航栏 -->
					<el-aside class="aside">
						<!-- Element Plus菜单组件 -->
						<el-menu active-text-color="#ffd04b" background-color="#00007f" class="el-menu-vertical-demo"
							text-color="#fff" @open="handleOpen" @close="handleClose">
							<!-- 首页菜单项 -->
							<a href="welcome.html" target="myframe">
								<el-menu-item index="1">
									<el-icon>
										<location />
									</el-icon>
									<span>首页</span>
								</el-menu-item>
							</a>
							<!-- 体检预约菜单项 -->
							<a href="tijianyuyue.html" target="myframe">
								<el-menu-item index="2">
									<el-icon>
										<Service />
									</el-icon>
									<span>体检预约</span>
								</el-menu-item>
							</a>
							<!-- 预约列表菜单项 -->
							<a href="yuyuelist.html" target="myframe">
								<el-menu-item index="3">
									<el-icon>
										<Grid />
									</el-icon>
									<span>预约列表</span>
								</el-menu-item>
							</a>
							<!-- 体检客户查询菜单项 -->
							<a href="tijianmain.html" target="myframe">
								<el-menu-item index="4">
									<el-icon>
										<document />
									</el-icon>
									<span>体检客户查询</span>
								</el-menu-item>
							</a>
						</el-menu>
					</el-aside>

					<!-- 主内容区域 -->
					<el-container>
						<!-- 主显示区 - 使用iframe加载各功能页面 -->
						<el-main class="main">
							<!-- iframe默认加载wel.html页面 -->
							<iframe src="wel.html" name="myframe" class="myframe"></iframe>
						</el-main>
						
					</el-container>
				</el-container>
			</el-container>
		</div>
	</body>
	<script>
		// Vue应用定义
		const App = {
			data() {
				return {
					// 数据属性定义区域
				}
			},
			methods: {
				// 退出登录方法
				logout(){
					// 跳转到登录页面
					location.href="login.html";
				},
				// 菜单展开事件处理
				handleOpen(key, keyPath) {
					console.log(key, keyPath);
				},
				// 菜单收起事件处理
				handleClose(key, keyPath) {
					console.log(key, keyPath);
				}
			}
		};
		
		// 创建Vue应用实例
		const app = Vue.createApp(App);
		// 使用Element Plus插件
		app.use(ElementPlus);
		// 注册Element Plus图标组件
		app.component("phone", ElementPlusIconsVue.Phone);
		app.component("document", ElementPlusIconsVue.Document);
		app.component("Service", ElementPlusIconsVue.Service);
		app.component("Location", ElementPlusIconsVue.Location);
		app.component("Grid", ElementPlusIconsVue.Grid);
		// 挂载Vue应用到DOM
		app.mount("#app");
	</script>
</html>